<template>
  <view>
    <view class="input-container">
      <input v-model="name" placeholder="标题" class="input-field" />
      <input v-model="addr" placeholder="内容" class="input-field" />
    </view>
    <button @click="submitData" class="add-button">提交</button>

    <uni-list>
      <uni-list-item class="bbb" v-for="n in videos" :key="n.id" :title="n.name" :note="n.addr" :to="'../info/info?id=' + n.id">
      </uni-list-item>
    </uni-list>

    <image src="https://www.yulumi.cn/gl/uploads/allimg/201121/11200I923-1.jpg" class="image" />

  </view>
</template>

<script>
import "../../uni_modules/uni-list/components/uni-list/uni-list.vue"

export default {
  data() {
    return {
      name: '',
      addr: '',
      title: 'Hello',
      videos: []
    }
  },
  // 生命周期函数
  onLoad() {
    this.getData()
  },
  methods: {
    getData() {
      uni.request({
        url: "http://localhost:6868/api/video/list",
        success: (response) => {
          console.log(response.data)
          this.videos = response.data;
        }
      })
    },
    submitData() {
      const newVideo = {
        name: this.name,
        addr: this.addr
      };

      uni.request({
        url: "http://localhost:6868/api/video/add",
        method: "POST",
        data: newVideo,
        success: (response) => {
          console.log('数据提交成功', response.data);
          // 假设服务器返回插入数据库后的新视频对象
          this.videos.push(response.data);

          // 清空输入框
          this.name = '';
          this.addr = '';
        },
        fail: (error) => {
          console.error('数据提交失败', error);
          // 处理提交失败的情况
        }
      });
    }
  }
}
</script>

<style>
	.bbb{
		background-color: aqua;
	}
	
.input-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.input-field {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.add-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 40px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.add-button:hover {
  background-color: #0056b3;
}

.add-button:focus {
  outline: none;
}

.image {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
</style>
